<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<link rel="stylesheet" type="text/css" href="styles/resistors.css" />
	<script type="text/javascript" src="scripts/resistors.js"> </script>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>Resistor app</title>
</head>
<body>
	<div id="outer">
		<div id="conv-type">
			Value to color: <input type="radio" id="ttc" name="text-to-color" onchange="dovtc()" /><br />
			Color to value: <input type="radio" id="ctt" name="color-to-text" onchange="doctv()" /><br />
		</div>
		<div style="border: solid black 1px;" id="vtc">
			<div id="vtc-primary-input">
				Value:<br />
				<input type="text" id="vtc-value" />
				<select id="vtc-dim">
					<option value="O">Ohm</option>
					<option value="K">KOhm</option>
					<option value="M">MOhm</option>
				</select>
				<button type="button" onclick="calculatevtc(document.getElementById('vtc-value').value, document.getElementById('vtc-dim').value)">Calc</button>
			</div>
			<div id="vtc-primary-output">
				Value <span id="vtc-answ">XXX</span><br />
				Exact value: <span id="vtc-exact">EEE</span><br />				
				Lower value: <span id="vtc-lower">YYY</span><br />
				Higher value: <span id="vtc-higher">ZZZ</span><br />
			</div>
			<div id="vtc-resistor">
				Here dragons reign.
			</div>
		</div>
		<div style="border: solid black 1px;" id="ctv">
			<div id="ctv-primary-input">
				<table border="1" id="ctv-table">
					<tr>
						<th>1st</th><th>2nd</th><th>3rd</th><th>4th</th>
					</tr>
					<tr>
						<td id="c1r1" class="black-rect" onclick="selected(this.id)">0</td>
						<td id="c2r1" class="black-rect" onclick="selected(this.id)">0</td>
						<td id="c3r1" class="black-rect" onclick="selected(this.id)">0</td>
						<td id="c4r1" onclick="selected(this.id)"><abbr title="No band">&#177;20%</abbr></td>
					</tr>
					<tr>
						<td id="c1r2" class="brown-rect" onclick="selected(this.id)">1</td>
						<td id="c2r2" class="brown-rect" onclick="selected(this.id)">1</td>
						<td id="c3r2" class="brown-rect" onclick="selected(this.id)">1</td>
						<td id="c4r2" class="silver-rect" onclick="selected(this.id)">&#177;10%</td>
					</tr>
					<tr>
						<td id="c1r3" class="red-rect" onclick="selected(this.id)">2</td>
						<td id="c2r3" class="red-rect" onclick="selected(this.id)">2</td>
						<td id="c3r3" class="red-rect" onclick="selected(this.id)">2</td>
						<td id="c4r3" class="gold-rect" onclick="selected(this.id)">&#177;5%</td>
					</tr>
					<tr>
						<td id="c1r4" class="orange-rect" onclick="selected(this.id)">3</td>
						<td id="c2r4" class="orange-rect" onclick="selected(this.id)">3</td>
						<td id="c3r4" class="orange-rect" onclick="selected(this.id)">3</td>
						<td id="c4r4" class="red-rect" onclick="selected(this.id)">&#177;2%</td>
					</tr>
					<tr>
						<td id="c1r5" class="yellow-rect" onclick="selected(this.id)">4</td>
						<td id="c2r5" class="yellow-rect" onclick="selected(this.id)">4</td>
						<td id="c3r5" class="yellow-rect" onclick="selected(this.id)">4</td>
						<td id="c4r5" class="brown-rect" onclick="selected(this.id)">&#177;1%</td>
					</tr>
					<tr>
						<td id="c1r6" class="green-rect" onclick="selected(this.id)">5</td>
						<td id="c2r6" class="green-rect" onclick="selected(this.id)">5</td>
						<td id="c3r6" class="green-rect" onclick="selected(this.id)">5</td>
						<td id="c4r6" class="green-rect" onclick="selected(this.id)">&#177;0.5%</td>
					</tr>
					<tr>
						<td id="c1r7" class="blue-rect" onclick="selected(this.id)">6</td>
						<td id="c2r7" class="blue-rect" onclick="selected(this.id)">6</td>
						<td id="c3r7" class="blue-rect" onclick="selected(this.id)">6</td>
						<td id="c4r7" class="blue-rect" onclick="selected(this.id)">&#177;0.25%</td>
					</tr>
					<tr>
						<td id="c1r8" class="violet-rect" onclick="selected(this.id)">7</td>
						<td id="c2r8" class="violet-rect" onclick="selected(this.id)">7</td>
						<td id="c3r8" class="violet-rect" onclick="selected(this.id)">7</td>
						<td id="c4r8" class="violet-rect" onclick="selected(this.id)">&#177;0.1%</td>
					</tr>
					<tr>
						<td id="c1r9" class="gray-rect" onclick="selected(this.id)">8</td>
						<td id="c2r9" class="gray-rect" onclick="selected(this.id)">8</td>
						<td id="c3r9" class="gray-rect" onclick="selected(this.id)">8</td>
						<td id="c4r9" class="gray-rect" onclick="selected(this.id)">&#177;0.05%</td>
					</tr>
					<tr>
						<td id="c1r10" class="white-rect" onclick="selected(this.id)">9</td>
						<td id="c2r10" class="white-rect" onclick="selected(this.id)">9</td>
						<td id="c3r10" class="white-rect" onclick="selected(this.id)">9</td>
					</tr>
				</table>
			</div>
			<div id="ctv-primary-output">
				<span id="num-value"></span><br />
				<span id="numtol"></span>
			</div>
		</div>
		<span id="copyright">Converter by <a href="http://rntmns.com" title="Blog about computers and electronics">RNTMNS</a></span>
	</div>
</body>
</html>
